import { _decorator, Component, Node, Size, tween, UIOpacity, v3, view } from 'cc';
import { UIBase } from './UIBase';
const { ccclass, property } = _decorator;
//  none,
//     fade,
//     scale,
//     scaleX,
//     scaleY,
//     topIn,
//     bottomIn,
//     leftIn,
//     rightIn
//专门处理动画切换
@ccclass('UIAnimation')
export class UIAnimation{
    private _ui:UIBase = null;
    private _viewSize:Size = view.getDesignResolutionSize();
    private _objCallback = {
        'open':[
            (cb:Function)=>{
                cb();
            },
            (cb:Function)=>{
                let uiOpacty = this._ui.node.addComponent(UIOpacity);
                uiOpacty.opacity = 0;
                tween(uiOpacty)
                .to(0.3,{opacity:255})
                .call(()=>{
                    cb();
                })
                .start();
            },
            (cb:Function)=>{
                this._ui.node.setScale(v3(0,0,1))
                tween(this._ui.node)
                .to(0.3,{scale:v3(1,1,1)})
                .call(()=>{
                    cb();
                })
                .start();
            },
            (cb:Function)=>{
                this._ui.node.setScale(v3(0,1,1))
                tween(this._ui.node)
                .to(0.3,{scale:v3(1,1,1)})
                .call(()=>{
                    cb();
                })
                .start();
            },
            (cb:Function)=>{
                this._ui.node.setScale(v3(1,0,1))
                tween(this._ui.node)
                .to(0.3,{scale:v3(1,1,1)})
                .call(()=>{
                    cb();
                })
                .start();
            },
            (cb:Function)=>{
                let pos = this._ui.node.position.clone();
                this._ui.node.setPosition(v3(this._ui.node.position.x,this._viewSize.height,0));
                tween(this._ui.node)
                .to(0.3,{position:pos})
                .call(()=>{
                    cb();
                })
                .start();
            },
            (cb:Function)=>{
                let pos = this._ui.node.position.clone();
                this._ui.node.setPosition(v3(this._ui.node.position.x,-this._viewSize.height,0));
                tween(this._ui.node)
                .to(0.3,{position:pos})
                .call(()=>{
                    cb();
                })
                .start();
            },
            (cb:Function)=>{
                let pos = this._ui.node.position.clone();
                this._ui.node.setPosition(v3(-this._viewSize.width,this._ui.node.position.y,0));
                tween(this._ui.node)
                .to(0.3,{position:pos})
                .call(()=>{
                    cb();
                })
                .start();
            },
            (cb:Function)=>{
                this._ui.node.setPosition(v3(this._viewSize.width,this._ui.node.position.y,0));
                tween(this._ui.node)
                .by(0.3,{position:v3(-this._viewSize.width,0,0)})
                .call(()=>{
                    cb();
                })
                .start();
            }
        ],
        'close':[
            (cb:Function)=>{
                cb();
            },
            (cb:Function)=>{
                let uiOpacty = this._ui.node.getComponent(UIOpacity);
                uiOpacty.opacity = 255;
                tween(uiOpacty)
                .to(0.3,{opacity:0})
                .call(()=>{
                    cb();
                })
                .start();
            },
            (cb:Function)=>{
                this._ui.node.setScale(v3(1,1,1))
                tween(this._ui.node)
                .to(0.3,{scale:v3(0,0,0)})
                .call(()=>{
                    cb();
                })
                .start();
            },
            (cb:Function)=>{
                this._ui.node.setScale(v3(1,1,1))
                tween(this._ui.node)
                .to(0.3,{scale:v3(0,1,0)})
                .call(()=>{
                    cb();
                })
                .start();
            },
            (cb:Function)=>{
                this._ui.node.setScale(v3(1,1,1))
                tween(this._ui.node)
                .to(0.3,{scale:v3(1,0,0)})
                .call(()=>{
                    cb();
                })
                .start();
            },
            (cb:Function)=>{                
                tween(this._ui.node)
                .by(0.3,{position:v3(0,this._viewSize.height,0)})
                .call(()=>{
                    cb();
                })
                .start();
            },
            (cb:Function)=>{
                let pos = this._ui.node.position.clone();
                tween(this._ui.node)
                .by(0.3,{position:v3(0,-this._viewSize.height,0)})
                .call(()=>{
                    cb();
                    this._ui.node.setPosition(pos);
                })
                .start();
            },
            (cb:Function)=>{
                tween(this._ui.node)
                .by(0.3,{position:v3(-this._viewSize.width,0,0)})
                .call(()=>{
                    cb();
                })
                .start();
            },
            (cb:Function)=>{
                tween(this._ui.node)
                .by(0.3,{position:v3(this._viewSize.width,0,0)})
                .call(()=>{
                    cb();
                })
                .start();
            }
        ]
    }
    constructor(ui:UIBase){
        this._ui = ui;
    }

    //播放入场退场动画
    playAnimtion(openOrClose:string,index:number,cb:Function){
        //根据openOrClose去调用响应的动画逻辑。
        //动画播放完毕，那么执行回调。
        this._objCallback[openOrClose][index](cb);
    }
}


